import React, { useEffect } from 'react';
import * as echarts from 'echarts/core';
import { ToolboxComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import option from './someOption';

import './index.less';

echarts.use([ToolboxComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);

const SomeLine: React.FC = () => {
  const refreshList = () => {
    const chartDom = document.getElementById('some_line')!;
    const myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
  };

  useEffect(() => {
    setTimeout(() => {
      const chartDom = document.getElementById('some_line')!;
      const myChart = echarts.init(chartDom);
      if (myChart) {
        refreshList();
      }

      option && myChart.setOption(option);
    }, 500);
  }, []);

  return <div id="some_line"></div>;
};

export default SomeLine;
